<template>
    <div style="width: 60%;height: 100%;margin: 0 auto;margin-top: 70px;">
        <a-card :hoverable="true" title="修改密码" style="border-radius: 10px;overflow: hidden;">
            <div>
                <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
                    <a-form-item label="登录账户" field="name">
                        <a-input disabled v-model="formData.name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="真实姓名" field="true_name">
                        <a-input disabled v-model="formData.true_name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="新登录密码" field="password">
                        <a-input-password v-model="formData.password" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="旧登录密码" field="old_password">
                        <a-input-password v-model="formData.old_password" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="新操作密码" field="pay_password">
                        <a-input-password v-model="formData.pay_password" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="旧操作密码" field="old_pay_password">
                        <a-input-password v-model="formData.old_pay_password" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="谷歌验证码" field="google_code">
                        <a-input v-model="formData.google_code" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="" field="">
                        <div style=" width: 100%; display: flex; justify-content: flex-end;">
                            <a-button type="primary" style="padding:8px 40px;" :loading="submitLoading" @click="submit">提交</a-button>
                        </div>
                        
                     </a-form-item>
                </a-form>
            </div>
        </a-card>
    </div>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import systemApi from '@/api/system/system'
import { throttle } from 'lodash';
import { useUserStore } from '@/store';
const formRef =ref()
const userStore = useUserStore()
const submitLoading=ref(false)
import { useRouter } from 'vue-router'
const router = useRouter()
const formData = reactive({
    name: userStore?.user?.name,
    true_name: userStore?.user?.true_name,
    password: '',
    old_password: '',
    pay_password: '',
    old_pay_password: '',
    google_code: '',
})

const rules = ref({
    name: [{ required: true, message: '请输入' }],
    true_name: [{ required: true, message: '请输入' }],
    password: [{ required: true, message: '请输入' }, {
        validator: (value, cb) => {
            const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
            if (!regex.test(value)) {
                cb('密码必须包含字母和数字，并且长度在 8 到 16 位之间');
            } else {
                cb();
            }
        }
    }],
    old_password: [{ required: true, message: '请输入' }],
    pay_password: [{ required: true, message: '请输入' }, {
        validator: (value, cb) => {
            const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
            if (!regex.test(value)) {
                cb('密码必须包含字母和数字，并且长度在 8 到 16 位之间');
            } else {
                cb();
            }
        }
    }],
    old_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
});

const submit = throttle(async () => {

  const validate = await formRef.value?.validate()
  if (!validate) {
    submitLoading.value = true
    try{
        let data = { ...formData }
        let result = {}
        result = await systemApi.updateMyInfo(data)
        Message.success('提交成功')
        setTimeout(async() => {
            submitLoading.value = false
            router.push({ name: 'dashboard' })
        }, 500)
    }catch{
        submitLoading.value = false
    }
  }
},100)
</script>